<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app">{{ proxy }}</div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, reactive } = Vue;

      const app = createApp({
        setup() {
          const raw = { count: 0 };
          const proxy = reactive(raw);

          // 1. 代理对象和原始对象不是全等的
          // 所以为了不犯错：Vue官方建议 仅使用代理对象
          console.log(raw === proxy);

          // 2. 为了保证一致性，reactive 始终会返回代理对象
          // 在同一个对象上调用 reactive() 会返回相同的代理
          console.log(reactive(raw) === proxy); // true
          // 在一个代理上调用 reactive() 会返回它自己
          console.log(reactive(proxy) === proxy); // true
          return {
            proxy,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
